<template>  
    <div class="bgcolor">
       <home-header></home-header>
       <home-swiper :list="swiperList"></home-swiper>
       <home-icons  :list="iconsList"></home-icons> 
       <home-swiperlist  :list="swiperlist"></home-swiperlist> 
       <home-recommend :list="recommendlist"></home-recommend>
       <home-weekend :list="weekendlist"></home-weekend>
    </div>  
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/HomeIcons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend.vue'
import HomeSwiperlist from './components/Swiperlist'
import axios from 'axios'
export default {
    name :'Home',
    components: {
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWeekend,
        HomeSwiperlist
    },
    data(){
        return{           
            swiperList:[],
            iconsList:[],
            recommendlist:[],
            weekendlist:[],
            swiperlist:[]
        }
    },
    methods: {
        getHomeInfo(){
            axios.get('./static/mock/index.json')
            .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc(res){
            res=res.data
            // console.log(res)
            if(res.ret && res.data){
                const data=res.data           
                this.swiperList=data.swiperList
                this.iconsList=data.iconslist
                this.recommendlist=data.recommendlist
                this.weekendlist=data.weekendlist   
                this.swiperlist=data.swiperlist              
            }                              
        }
    },
    mounted () {
        this.getHomeInfo()
    }

}
</script>

<style scoped>
.bgcolor{
      background: #e9f3f5;
      overflow: hidden;
}

</style>
